<template>
	<view class="p-bot40" :style="themeColor">
		<u-navbar bgColor="transparent">
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" size="20"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="file-text" size="24"></u-icon>
				<view class="orderNum">5</view>
			</view>
		</u-navbar>

		<image :src="Img" mode="widthFix" class="rows"></image>
		<view class="City">
			<view class="flex-1 d-flex a-center">
				<text class="color_99 size26">当前城市：</text>
				<text class="black size30">{{city}}</text>
			</view>
			<view class="ubtn" @click="switchCity">
				<u-button text="切换城市" class="ubtn" plain></u-button>
			</view>

		</view>

		<view class="Wrapper ">
			<store-list></store-list>
			<store-list></store-list>
			<store-list></store-list>
			<store-list></store-list>
			<store-list></store-list>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import StoreList from './components/StoreList.vue'
	export default {
		components: {
			StoreList
		},
		data() {
			return {
				Img: 'https://msraimgcdn.mogoie.com/6099/1693813515733.jpg',

			}
		},
		onLoad(opt) {
			console.log(opt);
		},
		methods: {
			switchCity() {
				this.toUrl(`/orderPage/Addresslist/cityList`)
			}
		},
		computed: {
			...mapState(['city']),
			...mapGetters(['themeColor'])
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $page;

	}
</style>
<style lang="scss" scoped>
	.u-nav-slot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: 1rpx solid $borColor;
		background-color: $page;
		padding: 6rpx 22rpx;
		opacity: .8;
		border-radius: 30rpx;
		position: relative;

		.orderNum {
			padding: 0 10rpx;
			border-radius: 50%;
			background-color: var(--color);
			position: absolute;
			top: 4rpx;
			right: 10rpx;
			z-index: 10;
			color: #fff;
			font-size: 20rpx;
		}
	}

	.City {
		width: 100%;
		padding: 24rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.ubtn {
			display: flex;

			width: 200rpx;
			height: 70rpx;
		}
	}

	.Wrapper {
		width: 710rpx;
		margin: 0 auto;
		box-sizing: border-box;
	}
</style>